<template>
  <div class="user-login-log">
    <a-descriptions :title="$t('all.autotext1489')"></a-descriptions>
    <ConfigForm
      ref="configForm"
      :formConfig="formConfig"
      :formModel="formModel"
      :formItems="formItems"
      :tableConfig="tableConfig"
    >
    </ConfigForm>
  </div>
</template>

<script>
import ConfigForm from '@comp/ConfigForm/index.vue'
import { apiGetLoginLogList, apiExportLoginLogExcel, apiExportLoginLogPdf } from '@api/account/user'
import { unreactive, exportBlob, getFileNameByResponse } from '@/utils/util'
import moment from 'moment'

export default {
  name: 'UserLoginLog',
  components: { ConfigForm },
  data () {
    const _this = this
    const formModel = {
      loginTime: [],
      loginStatus: ''
    }
    const formItems = unreactive([
      {
        label: this.$t('all.autotext1192'),
        key: 'loginTime',
        type: 'dateRangePicker',
        props: {
          valueFormat: 'YYYY-MM-DD',
          disabledDate: (current) => {
            return current > moment().endOf('day')
          }
        }
      },
      {
        label: this.$t('all.autotext107'),
        key: 'loginStatus',
        type: 'select',
        props: {
          options: [
            {
              key: this.$t('all.autotext872'),
              value: 1
            },
            {
              key: this.$t('all.autotext1248'),
              value: 0
            }
          ]
        }
      }
    ])
    const formConfig = unreactive({
      buttons: [
        {
          label: this.$t('all.autotext30'),
          key: 'search',
          props: {
            type: 'primary'
          },
          on: {
            click: () => {
              const table = _this.getTableVm()
              table.refresh()
            }
          }
        },
        {
          label: this.$t('all.autotext340'),
          key: 'reset',
          on: {
            click: () => {
              _this.formModel = {
                loginTime: [],
                loginStatus: ''
              }
              const table = _this.getTableVm()
              table.refresh(true)
            }
          }
        },
        {
          label: this.$t('all.autotext1014'),
          key: 'export',
          tag: 'a-dropdown',
          dropdownItems: [
            { key: 'Excel', label: 'Excel' },
            { key: 'Pdf', label: 'Pdf' }
          ],
          style: {
            marginLeft: 'auto'
          },
          on: {
            click: (e) => {
              if (e.key === 'Excel') return _this.exportLogExcel()
              if (e.key === 'Pdf') return _this.exportLogPdf()
            }
          }
        }
      ]
    })
    const tableConfig = unreactive({
      data: this.loadData,
      columns: [
        {
          title: this.$t('all.autotext334'),
          dataIndex: 'id',
          scopedSlots: {
            customRender: 'id',
            render: (h, { index, pagination }) => {
              return (
                <span>{_this.getIndexDesc(index, pagination)}</span>
              )
            }
          }
        },
        {
          title: this.$t('all.autotext1523'),
          dataIndex: 'terminalFlag'
        },
        {
          title: 'IP ' + this.$t('all.autotext275'),
          dataIndex: 'ip'
        },
        {
          title: this.$t('all.autotext1114'),
          dataIndex: 'loginTime'
        },
        {
          title: this.$t('all.autotext107'),
          dataIndex: 'loginStatusStr',
          scopedSlots: {
            customRender: 'loginStatusStr',
            render: (h, { text }) => {
              if (text === this.$t('all.autotext872')) {
                return (<div style='color: #43D882'>· {text}</div>)
              }
              return (<div style='color: #F02F2F'>· {text}</div>)
            }
          }
        },
        {
          title: this.$t('all.autotext1088'),
          dataIndex: 'failReason',
          customRender: text => (text || '-')
        },
        {
          title: this.$t('all.autotext1178'),
          dataIndex: 'logoutTime'
        }
      ]
    })
    return {
      formModel,
      formItems,
      formConfig,
      tableConfig
    }
  },
  methods: {
    getRequestParams () {
      const { loginTime, loginStatus } = this.formModel
      return {
        logType: 3, // 日志类型（1-系统 2-项目 3-个人）
        loginTimeStart: loginTime[0],
        loginTimeEnd: loginTime[1] || '',
        loginStatus
      }
    },
    loadData (parameter) {
      const params = Object.assign(parameter, this.getRequestParams())
      return apiGetLoginLogList(params).then(res => {
        return res
      })
    },
    getIndexDesc (index, pagination) {
      const { total, current, pageSize } = pagination
      const currentItem = (current - 1) * pageSize
      return (total - currentItem - index)
    },
    getTableVm () {
      // todo: 这里获取子表格嵌套太深、耦合性太高，改成 eventBus 获取会更好
      return this.$refs.configForm.getTableVm()
    },
    localExport (response) {
      const { headers, data } = response
      const fileName = getFileNameByResponse(headers)
      exportBlob(fileName, data)
    },
    exportLogExcel () {
      return apiExportLoginLogExcel(this.getRequestParams()).then(this.localExport)
    },
    exportLogPdf () {
      return apiExportLoginLogPdf(this.getRequestParams()).then(this.localExport)
    }
  }
}
</script>

<style scoped lang='less'>
.user-login-log {
  border-radius: 8px;
  background-color: #fff;
  padding: 32px 20px;
}

</style>
